<template>
  <div class="pos">
    <el-row class="el-row-01">
      <el-col :span="7" class="pos-order">
        <el-tabs>
          <el-tab-pane label="点餐">
            <el-table :data="tableData" border style="font-size:12px">
              <el-table-column prop="goodsName" label="商品名称"></el-table-column>
              <el-table-column prop="count" label="数量" width="50"></el-table-column>
              <el-table-column prop="price" label="金额" width="70"></el-table-column>
              <el-table-column label="操作" width="100" fixed="right">
                <template scope="scope">
                  <el-button type="text" size="small">删除</el-button>
                  <el-button type="text" size="small" @click="addOrderList(scope.row)">增加</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="totalDiv">
              <small>数量：{{totalCount}}</small>&nbsp;&nbsp;&nbsp;
              <small>金额：{{totalMoney}}元</small>
            </div>
            <div class="div_btn">
              <el-button type="warning">挂单</el-button>
              <el-button type="danger" @click="deleteAll()">删除</el-button>
              <el-button type="success">结账</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="挂单"></el-tab-pane>
          <el-tab-pane label="外卖"></el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="17">
        <div class="often-goods">
          <div class="title">常用商品</div>
          <div class="often-goods-list">
            <ul>
              <li v-for="item in oftenGoods" @click="addOrderList(item)">
                <span>{{item.goodsName}}</span>
                <span class="o-price">￥{{item.price}}元</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="goods-type">
          <el-tabs>
            <el-tab-pane label="汉堡">
              <div>
                <ul class="cookList">
                  <li v-for="item in type0Goods" @click="addOrderList(item)">
                    <span class="foodImg"><img :src="item.goodsImg" width="100px" height="100px"></span>
                    <span class="foodName">{{item.goodsName}}</span>
                    <span class="foodPrice">￥{{item.price}}元</span>
                  </li>
                </ul>
              </div>
            </el-tab-pane>
            <el-tab-pane label="小食">
              <div>
                <ul class="cookList">
                  <li v-for="item in type1Goods" @click="addOrderList(item)">
                    <span class="foodImg"><img :src="item.goodsImg" width="100px" height="100px"></span>
                    <span class="foodName">{{item.goodsName}}</span>
                    <span class="foodPrice">￥{{item.price}}元</span>
                  </li>
                </ul>
              </div>
            </el-tab-pane>
            <el-tab-pane label="饮料">
              <div>
                <ul class="cookList">
                  <li v-for="item in type2Goods" @click="addOrderList(item)">
                    <span class="foodImg"><img :src="item.goodsImg" width="100px" height="100px"></span>
                    <span class="foodName">{{item.goodsName}}</span>
                    <span class="foodPrice">￥{{item.price}}元</span>
                  </li>
                </ul>
              </div>
            </el-tab-pane>
            <el-tab-pane label="套餐">
              <div>
                <ul class="cookList">
                  <li v-for="item in type3Goods" @click="addOrderList(item)">
                    <span class="foodImg"><img :src="item.goodsImg" width="100px" height="100px" alt="商品图片"></span>
                    <span class="foodName">{{item.goodsName}}</span>
                    <span class="foodPrice">￥{{item.price}}元</span>
                  </li>
                </ul>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
    import axios from "axios";

    export default {
        name: "pos",
        data() {
            return {
                tableData: [],
                oftenGoods: [],
                type0Goods: [],
                type1Goods: [],
                type2Goods: [],
                type3Goods: [],
                totalMoney: 0,
                totalCount: 0,
            }
        },
        methods: {
            addOrderList(goods) {
                console.log("添加商品");
                this.totalMoney = 0;
                this.totalCount = 0;
                let isHave = false;
                for (let i = 0; i < this.tableData.length; i++) {
                    if (this.tableData[i].goodsId === goods.goodsId) {
                        isHave = true
                    }
                }
                if (isHave) {
                    let arr = this.tableData.filter(o => o.goodsId === goods.goodsId);
                    console.log(arr);
                    arr[0].count++
                } else {
                    let newGoods = {goodsId: goods.goodsId, goodsName: goods.goodsName, price: goods.price, count: 1};
                    this.tableData.push(newGoods);
                }
                this.tableData.forEach((element) => {
                    this.totalCount += element.count;
                    this.totalMoney = this.totalMoney + (element.price * element.count);
                })
            },
            deleteAll() {
                this.tableData = [];
                this.totalMoney = 0;
                this.totalCount = 0;
            },
            async getInfo() {
                let response = await axios.get("/api/pro");
                if (response) {
                    console.log(response);
                    this.oftenGoods = response.data.data[4];
                    this.type0Goods = response.data.data[0];
                    this.type1Goods = response.data.data[1];
                    this.type2Goods = response.data.data[2];
                    this.type3Goods = response.data.data[3];
                } else {
                    console.log("请求失败")
                }
            },
            getInfo2() {
                axios.get("http://127.0.0.1:8000/api/pro")
                    .then(response => {
                        console.log(response);
                        this.oftenGoods = response.data.data[4];
                        this.type0Goods = response.data.data[0];
                        this.type1Goods = response.data.data[1];
                        this.type2Goods = response.data.data[2];
                        this.type3Goods = response.data.data[3];
                    })
                    .catch(error => {
                        console.log(error);
                        console.log('网络错误，不能访问');
                    })
            }
        },
        created() {
            this.getInfo2();
        }
    }
</script>

<style scoped>
  .el-row-01 {
    display: flex;
  }

  .pos-order {
    background: #F9FAFC;
    border-right: 1px solid #C0CCDA;
    height: 100vh;

  }

  .div_btn {
    margin-top: 10px;
  }

  .title {
    height: 18px;
    border-bottom: 1px solid #D3dce6;
    background: #F9FAFC;
    padding: 10px;
    text-align: left;
  }

  .often-goods-list ul li {
    list-style: none;
    float: left;
    border: 1px solid #E5E9F2;
    padding: 10px;
    margin: 10px;
    background: #FFF;
    cursor: pointer;
  }

  .o-price {
    color: #58B7FF;
  }

  .goods-type {
    clear: both;
  }

  .cookList li {
    list-style: none;
    width: 23%;
    border: 1px solid #E5E9F2;
    height: auto;
    overflow: hidden;
    background-color: #fff;
    padding: 2px;
    float: left;
    margin: 2px;
    cursor: pointer;

  }

  .cookList li span {

    display: block;
    float: left;
  }

  .foodImg {
    width: 40%;
  }

  .foodName {
    font-size: 18px;
    padding-left: 10px;
    color: brown;

  }

  .foodPrice {
    font-size: 16px;
    padding-left: 10px;
    padding-top: 10px;
  }

  .totalDiv {
    background: #FFF;
    padding: 10px;
    border-bottom: 1px solid #FFFFFF;
  }
</style>
